<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=2,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>袜酷商城手机端</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script src="js/zepto.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/touch.js"></script>
<script src="js/index.js" type="text/javascript"></script>
</head>

<body class="pa">
	<div class="main pr">
        <!-- 主体部分 -->
        <div class="content">
            <div class="main1">
                <!-- 头部开始 -->
                <!-- 头部导航 -->
                <div class="header_nav w0">
                    <ul>
                        <li><a href="#">专业运动袜</a></li>
                        <li><a href="#">男袜</a></li>
                        <li><a href="#">女袜</a></li>
                        <li><a href="#">童袜</a></li>
                        <li><a href="#">宝宝袜</a></li>
                        <li><a href="#">糖尿病患者专用袜</a></li>
                    </ul>
                </div>
                <!-- 头部导航e -->
                <div class="header">
                    <!-- 返回s -->
                    <div class="back">
                        <a href="#">
                            <i class="iconfont">&#xe60b;</i>
                        </a>
                    </div>
                    <!-- 返回e -->
                    <!-- 搜索框 -->
                    <div class="header_ti">
                        <span>订单详情</span>
                    </div>
                    <!-- 搜索框e -->
                    <!-- 头部导航按钮 -->
                    <div class="header_n iconfont">
                        <a href="javascript:;">
                            &#xe60a;
                        </a>
                    </div>
                    <!-- 头部导航按钮e -->
                </div>
                <!-- 头部结束 -->
                <div class="section clearfix">
                    <!-- 暂无相关订单信息,为空时 -->
                    <div class="orderEmpty" style="display:none;">
                        <span>
                        </span>
                        <p class="tips">
                            暂无相关订单信息
                        </p>
                    </div>
                    <!-- 订单详情,不为空 -->
                    <script type="text/javascript">
                        $(function() {
                            $(".ccorder").bind('touchstart',
                            function(event) {
                                $(".mask,.alertTip").show().css('opacity', '.5');;
                            });
                            $(".alertTip .cancel").bind('touchstart',
                            function(event) {
                                $(".mask,.alertTip").hide();
                            });
                        })
                    </script>
                    <div class="orderStatus clearfix">
                        <h2>
                            订单号：
                            <span>
                                18141112014154646278
                            </span>
                        </h2>
                        <p class="status">
                            订单状态：
                            <span>
                                未确认
                            </span>
                        </p>
                        <!-- 未支付显示立即支付，已完成显示再次购买，跳转到购物车 -->
                        <!-- <a class="pay" href="javascript:;">再次购买</a> -->
                        <a class="pay" href="javascript:;">
                            立即支付
                        </a>
                        <p class="tipOrder" id="alert_orderinfo">
                        </p>
                    </div>
                    <div class="order trace">
                        <h2>
                            订单跟踪
                        </h2>
                        <ul class="traceList">
                            <li class="first">
                                <p>
                                    <span class="date">
                                        2014-11-12 13:41:55
                                    </span>
                                </p>
                                <p>
                                    您的订单已提交，等待系统审核
                                </p>
                            </li>
                        </ul>
                    </div>
                    <div class="order receiver">
                        <h2>
                            收货人信息
                        </h2>
                        <p class="cont">
                            <i class="name">
                                方超
                            </i>
                            <i class="tel">
                                18521310002
                            </i>
                            <br />
                            <i class="addr">
                                上海上海市嘉定区环城路2222号
                            </i>
                        </p>
                    </div>
                    <div class="order pay">
                        <h2>
                            支付方式
                        </h2>
                        <p class="cont">
                            <span class="alipay">
                                支付宝
                            </span>
                        </p>
                    </div>
                    <div class="order fapiao">
                        <h2>
                            发票信息
                        </h2>
                        <div class="cont">
                            <p>
                                发票抬头：
                                <i>
                                    个人
                                </i>
                            </p>
                            <p>
                                发票内容：
                                <i>
                                    酒水
                                </i>
                            </p>
                        </div>
                    </div>
                    <div class="order product">
                        <h2>
                            订单商品
                        </h2>
                        <ul class="orderInfo">
                            <li>
                                <a class="prodImg" href="#">
                                </a>
                                <img src="images/pic_01.jpg"
                                />
                                <div class="info">
                                    <a class="productName" href="#">
                                        法国高卢骑士干红葡萄酒
                                    </a>
                                </div>
                            </li>
                            <p class="count">
                                <span class="unitPrice">
                                    &yen;29
                                </span>
                                <span class="number">
                                    &times;1
                                </span>
                            </p>
                        </ul>
                    </div>
                    <!-- 已完成或者待收货状态不可取消订单,隐藏取消按钮 -->
                    <a class="btn ccorder" href="javascript:;">
                        取消订单
                    </a>
                </div>
            </div>
        </div>
        <!-- 主体部分结束 -->
        <!-- 底部部分 -->
        <div class="footer bg pr">
            <ul>
                <li class="footer_on"><a href="#"><span class="iconfont">&#xe608;</span>首页</a></li>
                <li><a href="#"><span class="iconfont">&#xe601;</span>购物车</a></li>
                <li><a href="javascript:;" class="f_mb"><span class="iconfont">&#xe604;</span>会员中心</a></li>
                <li><a href="#"><span class="iconfont f_rota">&#xe602;</span>分类</a></li>
             </ul>
        </div>
        <!-- 底部结束 -->
    </div>
</body>
</html>